/**
 * 资产选取页面
 */
import { useMemo, useState } from "react";

import { Button, Modal, Avatar, List, Form, Input, Select, Tag } from "antd";
import {
  FreeLayoutProps,
  WorkflowNodeProps,
  WorkflowNodeRenderer,
  Field,
  useNodeRender,
  domUtils,
} from "@flowgram.ai/free-layout-editor";

interface MoneyItem {
  datetime: string;
  totalMoney: string;
  loseMoney: string;
  payStatus: string;
}

//资产选取表单
export const MoneyIn = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const data: MoneyItem[] = [
    // {
    //   datetime: "2023-01-01",
    //   totalMoney: "10000",
    //   loseMoney: "2000",
    //   payStatus: "未支付",
    // },
  ];

  return (
    <>
      <Button type="primary" onClick={showModal}>
        收成交款
      </Button>
      <hr />
      <Tag color="#87d068">成交款</Tag>
      <Field<MoneyItem[]> name="cjk_list">
        {({ field }) => (
          <>
            <List
              itemLayout="horizontal"
              dataSource={field.value}
              renderItem={(item, index) => (
                <List.Item>
                  <List.Item.Meta
                    //   avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                    title={
                      <a href="https://ant.design">
                        [{item.datetime}]总额: {item.totalMoney} 待缴：
                        {item.loseMoney}
                      </a>
                    }
                    description={
                      <span
                        style={{
                          color:
                            item.payStatus === "已支付" ? "green" : "inherit",
                        }}
                      >
                        {item.payStatus}
                      </span>
                    }
                  />
                </List.Item>
              )}
            />
          </>
        )}
      </Field>

      <hr />
      <Tag color="#87d068">竞买人服务费</Tag>
      <List
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              //   avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
              title={
                <a href="https://ant.design">
                  [{item.datetime}]总额: {item.totalMoney} 待缴：
                  {item.loseMoney}
                </a>
              }
              description={
                <span
                  style={{
                    color: item.payStatus === "已支付" ? "green" : "inherit",
                  }}
                >
                  {item.payStatus}
                </span>
              }
            />
          </List.Item>
        )}
      />
      <hr />
      <Tag color="#87d068">委托方服务费</Tag>
      <List
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              //   avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
              title={
                <a href="https://ant.design">
                  [{item.datetime}]总额: {item.totalMoney} 待缴：
                  {item.loseMoney}
                </a>
              }
              description={
                <span
                  style={{
                    color: item.payStatus === "已支付" ? "green" : "inherit",
                  }}
                >
                  {item.payStatus}
                </span>
              }
            />
          </List.Item>
        )}
      />
      <Modal
        title="收成交款"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null} // 如果不需要默认的 footer 按钮，可以设置为 null
      >
        {/* 悬浮窗口内容 */}
        <Form
          form={form} // 关键：绑定表单实例
          name="wrap"
          labelCol={{ flex: "110px" }}
          labelAlign="left"
          labelWrap
          wrapperCol={{ flex: 1 }}
          colon={false}
          style={{ maxWidth: 600 }}
        >
          <Form.Item
            label="是否从保证金转成交款"
            name="enableSwitch"
            rules={[{ required: true }]}
          >
            <Select
              defaultValue="0"
              style={{}}
              // onChange={handleChange}
              options={[
                { value: "0", label: "否" },
                { value: "1", label: "是" },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="成交款总额"
            name="totalMoney"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label=" ">
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
